<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>弹幕系统</title>
    <script src="./js/jquery-3.7.1.min.js"></script>
    <script src="./js/vue.min.js"></script>
    <script src="./js/elementui.js"></script>
    <script src="./js/moment.min.js"></script>
    <link rel="stylesheet" href="./css/review.css">
    <link rel="stylesheet" href="./css/elementui.css">
    <link rel="stylesheet" type="text/css" href="./css/toastr.min.css">
    <script type="text/javascript" src="./js/toastr.min.js"></script>
</head>
<body>
    <div id="app">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="未审核" name="-1"></el-tab-pane>
        <el-tab-pane label="已通过" name="1"></el-tab-pane>
        <el-tab-pane label="已拒绝" name="0"></el-tab-pane>
      </el-tabs>
      <el-table
        v-loading="loading"
        :data="tableData"
        style="width: 100%">
        <!-- <el-table-column
          prop="sender"
          label="用户"
        ></el-table-column> -->
        
        <el-table-column
          prop="content"
          label="弹幕内容"
        ></el-table-column>
        <el-table-column
          prop="send_time"
          label="发送时间"
        >
          <template slot-scope="scope">
            <div>{{moment(scope.row.send_time).subtract(8, 'hours').format('YYYY-MM-DD HH:mm:ss')}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="scan"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <a class="scanAlink" style="color: green;" @click="changeActive(scope.row,1)" v-if="scope.row.status!=1">通过</a>
            <a class="scanAlink" style="color: red;" @click="changeActive(scope.row,0)" v-if="scope.row.status!=0">拒绝</a>
          </template>
        </el-table-column>
      </el-table>
      <div class="paginationWrap">
        <el-pagination
        layout="prev, pager, next"
        background
        :current-page="page"
        @current-change="changePage"
        :total="total">
      </el-pagination>
      </div>
     
    </div>
    
    <script>
        // 创建一个Vue实例
        new Vue({
          el: '#app',
          data: {
            loading:true,
            activeName:'-1',
            total: 0,
            page:1,
            tableData:[]
          },
          mounted(){
            this.getLIst()
            setInterval(() => {
              this.getLIst()
            }, 3000);
          },
          methods:{
            handleClick(tab, event) {
              console.log(tab);
              this.getLIst();
            },
            changeActive(row,status){
              console.log(row)
              const _this = this;
              $.ajax({
                url: `/api/danmu/update/${row.id}`,
                method:'PUT',
                contentType:'application/json',
                data:JSON.stringify({
                  status:status+''
                }),
                success:function(res){
                  toastr.success('审核成功');
                  _this.getLIst()
                },
                error:function(){

                }
              })
            },
            changePage(val){
              console.log(val)
              this.page = val;
              this.getLIst()
            },
            getLIst(){
              const _this = this;
              _this.loading = true;
              $.ajax({
                url: '/api/danmu',
                method:'POST',
                contentType:'application/json',
                data:JSON.stringify({
                  'page':this.page,
                  'page_size':10,
                  'status':this.activeName+''
                }),
                success:function(res){
                  console.log(res);
                  _this.tableData = res?.data||[]
                  _this.total = res?.total;
                  _this.loading = false;
                },
                error:function(){

                }
              })
             
            }
          },

        });
      </script>
</body>
</html>